import React from 'react'
import PropTypes from 'prop-types'
import { Avatar, Table } from 'antd'
import config from 'config'
import { Link } from 'react-router-dom'
import classnames from 'classnames'
import AnimTableBody from 'components/DataTable/AnimTableBody'
import styles from './List.less'

const List = ({
  openTab, isMotion, ...tableProps
}) => {

  const getAvatarText = (record) => {
    const { nickName, wxId } = record
    if (nickName) {
      return nickName.substr(nickName.length - 1, nickName.length)
    } else {
      return wxId ? wxId.substr(0, 1).toUpperCase() : 'D'
    }
  }

  const columns = [
    {
      title: '头像',
      dataIndex: 'icon',
      key: 'icon',
      width: 100,
      fixed: 'left',
      render: (avatar, record, index) => avatar ? <Avatar src={avatar} size="large" /> :
        <Avatar style={{ backgroundColor: config.randomColor(index), verticalAlign: 'middle' }}
          size="large">{getAvatarText(record)}</Avatar>,
    }, {
      title: '运营微号',
      dataIndex: 'wxId',
      key: 'wxId',
      width: 120,
      fixed: 'left',
      render: (wxid, record) => <Link to={'/operator/'.concat(record.wxId)}
        onClick={() => openTab(record)}>{record.wxNo ? record.wxNo : wxid}</Link>,
    }, {
      title: '微信昵称',
      dataIndex: 'nickname',
      key: 'nickname',
      fixed: 'left',
      width: 120,
    }, {
      title: '归属员工',
      dataIndex: 'belongEmpName',
      key: 'belongEmpName',
      width: 120,
    }, {
      title: '推广员工',
      dataIndex: 'promoterName',
      key: 'promoterName',
      width: 100,
    }, {
      title: '公司部门',
      dataIndex: 'deptName',
      key: 'deptName',
      width: 100,
    }, {
      title: '好友总数',
      dataIndex: 'friendNum',
      key: 'friendNum',
      width: 100,
    }, {
      title: '签收总金额',
      dataIndex: 'signedTotalAmounts',
      key: 'signedTotalAmounts',
      render: (val) => (val ? val : 0) + '元',
      width: 120,
    }, {
      title: '未更新朋友圈天数',
      dataIndex: 'unUpdateFriendCircleDays',
      key: 'unUpdateFriendCircleDays',
      width: 150,
    }, {
      title: '朋友圈最后更新时间',
      dataIndex: 'lastFriendCircleUpdateTime',
      key: 'lastFriendCircleUpdateTime',
      width: 180,
    }, {
      title: '朋友圈类型',
      dataIndex: 'friendCircleTypeName',
      key: 'friendCircleTypeName',
      width: 120,
    }, {
      title: '运营状态',
      dataIndex: 'operateStatusName',
      key: 'operateStatusName',
      width: 100,
    }, {
      title: '被封次数',
      dataIndex: 'bannedTimes',
      key: 'bannedTimes',
      width: 100,
    }, {
      title: '绑定号码',
      dataIndex: 'bindPhoneNum',
      key: 'bindPhoneNum',
      width: 130,
    }, {
      title: '地区',
      dataIndex: 'region',
      key: 'region',
      width: 100,
    }, {
      title: '个性签名',
      dataIndex: 'signature',
      key: 'signature',
      width: 100,
    }, {
      title: '人物IP',
      dataIndex: 'ipName',
      key: 'ipName',
      width: 100,
    }, {
      title: '注册日期',
      dataIndex: 'registerTime',
      key: 'registerTime',
      width: 150,
    }, {
      title: '自身来源',
      dataIndex: 'sourceName',
      key: 'sourceName',
      width: 100,
    }, {
      title: '录入时间',
      dataIndex: 'ctime',
      key: 'ctime',
      width: 150,
    }, {
      title: '设备码',
      dataIndex: 'deviceId',
      key: 'deviceId',
      width: 150,
    }, {
      title: '二维码',
      dataIndex: 'qrcode',
      key: 'qrcode',
      width: 100,
    }, {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
      width: 100,
    },
  ]

  const AnimateBody = (props) => {
    return <AnimTableBody {...props} />
  }

  const CommonBody = (props) => {
    return <tbody {...props} />
  }

  return (
    <Table
      {...tableProps}
      className={classnames(styles.table)}
      scroll={{ x: 3000 }}
      columns={columns}
      simple
      rowKey={record => record.id}
      components={{
        body: { wrapper: isMotion ? AnimateBody : CommonBody },
      }}
    />
  )
}

List.propTypes = {
  onDeleteItem: PropTypes.func,
  onEditItem: PropTypes.func,
  location: PropTypes.object,
}

export default List
